<template>
  <!-- 公告详情 -->
  <div class="app-container-add">
    <!-- 功能按钮 -->
    <el-row :gutter="10" class="button-wrap" :style="{width:mainContentWidth + 'px','left':'80px'}">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="middle" @click="handleReturn()">返回</el-button>
      </el-col>
    </el-row>
    <!-- form表单 -->
    <div ref="mainCont" class="main-content">
      <el-card ref="mainContent" class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>{{ title }}</span>
        </div>
        <div class="main-content-body">
          <p class="notice-title">{{ formData.noticeTitle }}</p>
          <article class="article">
            <div class="content" v-html="formData.noticeContent" />
            <p class="editor">责任编辑：{{ formData.createName }}</p>
          </article>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入富文本
import { getNoticeByNoticeId } from '@/api/PersonalOffice/notice'
export default {
  name: 'AddDialog',
  components: {
  },
  props: {
  },
  data() {
    return {
      mainContentWidth: '',
      // 添加或修改对话框标题
      title: '',
      // 公告详情
      formData: {
        noticeId: '',
        noticeTitle: '',
        noticeContent: '',
        createName: '',
        createTime: '',
        noticeType: '',
        enterpriseName: ''
      }
    }
  },
  mounted() {
    /** 获取主题内容宽度 start*/
    setTimeout(() => {
      this.mainContentWidth = this.$refs.mainContent.$el.offsetWidth
    }, 200)
    const that = this
    window.onresize = () => {
      return (() => {
        that.mainContentWidth = that.$refs.mainContent.$el.offsetWidth
      })()
    }
    /** 获取主题内容宽度 end*/

    this.title = this.$route.query.title
    this.formData.noticeId = this.$route.query.noticeId
    if (this.formData.noticeId) {
      this.getDetailById(this.formData.noticeId)
    }
  },
  methods: {
    // 返回
    handleReturn() {
      this.$router.go(-1)
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await getNoticeByNoticeId(id)
      this.formData = { ...data }
    }
  }
}
</script>

<style scoped lang="scss">
  .notice-title{
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
  }
  .content{
    p{
      margin: 0;
      line-height: 24px;
    }
  }
</style>

